

/* Asides */
.callout[data-callout~="aside"] {
    --callout-icon: message-square;
    --callout-color: '';
    --callout-margin: 0 -1.2em 0 5px;

    background-color: var(--aside-bg, var(--background-secondary));
    box-shadow: 
        .3em .3em 0 var(--accent, var(--background-modifier-box-shadow)),
        0 0 0 1px var(--accent, var(--background-modifier-box-shadow));
    
    float: right;
    position: relative;
    
    max-width: 400px;


    &:not([data-callout-metadata~="no-t"]) {
        & .callout-content { padding: 5px 10px; }
        & .callout-content p:first-child { margin-top: 0; }
    }

    &:not([data-callout-metadata~="show-title"], [data-callout-metadata~="s-t"]) {
        & .callout-title-inner { display: none; }
        & .callout-title { justify-content: space-between; }
    }


    &.is-collapsed {
        background-color: transparent;
        box-shadow: none;

        --callout-border-width: 0;
        --callout-padding: 0px 4px;
        
        & .callout-title-inner { display: none; }
        & .callout-title {
            justify-content: space-between;
            --callout-title-padding: 0px;
        }
        & .callout-fold { 
            margin: 0;
            padding: 0;
            margin-left: -25px;
            
            visibility: hidden;
        }
    }
}
.callout[data-callout~="aside"][data-callout-metadata~="clean"] {
    background: transparent;
    box-shadow: none;
}
.callout[data-callout~="aside"][data-callout-metadata~="tufte"] {
    background: transparent;
    box-shadow: none;

    float: right;
    position: relative;

    &:not(.is-collapsed) {
        width: 400px;
        margin-right: -25.3em;
    } 

    & .callout-title {
        padding-top: 0;
    }

    &.is-collapsed .callout-title {
        justify-content: unset;
    }
    &.is-collapsed .callout-content{ display: none; }
}

.callout.callout.callout[data-callout~="aside"] {
    
    // Left Aligned Aside Fixes
    &:is([data-callout-metadata~="left"],[data-callout-metadata~="p+l"]) {
        margin-left: -1.6em;

        &:not(.is-collapsed){ margin-right: 10px; }
        
        &[data-callout-metadata~="tufte"]:not(.is-collapsed) { 
            margin: unset;
            margin-left: -25em !important;

            & .callout-title {
                padding-top: 5px;
                flex-direction: row-reverse;
            }
        }
    }
}


//Fixes
.is-mobile.is-mobile .callout[data-callout~="aside"]:is([data-callout-metadata~="left"],[data-callout-metadata~="p+l"]) 
{ margin-left: 0; }

// LP Fix
.is-live-preview .callout[data-callout~="aside"] { float: unset; }
.is-live-preview.is-live-preview .callout.callout[data-callout~=aside] { margin: 5px; }
